<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="filter-container">
        <el-select v-model="currentView" placeholder="请选择统计视图" @change="handleViewChange">
          <el-option label="部门合同分布" value="department" />
          <el-option label="合同类型分布" value="type" />
          <el-option label="合同到期时间分布" value="expiry" />
        </el-select>
      </div>

      <!-- 图表容器 -->
      <div ref="chartContainer" style="width: 100%; height: 400px;" />
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ContractAnalysis',
  data() {
    return {
      chart: null,
      currentView: 'department',
      // 模拟数据
      mockData: {
        department: {
          title: '各部门合同数量统计',
          xData: ['技术部', '人事部', '财务部', '市场部', '运营部'],
          series: [
            {
              name: '固定期限合同',
              data: [20, 15, 10, 12, 18]
            },
            {
              name: '无固定期限合同',
              data: [10, 8, 5, 6, 9]
            }
          ]
        },
        type: {
          title: '合同类型分布',
          data: [
            { value: 75, name: '固定期限合同' },
            { value: 38, name: '无固定期限合同' },
            { value: 25, name: '实习合同' },
            { value: 15, name: '项目合同' }
          ]
        },
        expiry: {
          title: '合同到期时间分布',
          xData: ['1个月内', '1-3个月', '3-6个月', '6-12个月', '1年以上'],
          data: [5, 12, 18, 25, 40]
        }
      }
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.resizeChart)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.resizeChart)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      this.updateChart()
    },
    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },
    handleViewChange() {
      this.updateChart()
    },
    updateChart() {
      if (!this.chart) return

      let option = {}
      switch (this.currentView) {
        case 'department':
          option = this.getDepartmentOption()
          break
        case 'type':
          option = this.getTypeOption()
          break
        case 'expiry':
          option = this.getExpiryOption()
          break
      }
      this.chart.setOption(option, true)
    },
    getDepartmentOption() {
      const { title, xData, series } = this.mockData.department
      return {
        title: {
          text: title,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: '10%',
          data: series.map(item => item.name)
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: series.map(item => ({
          name: item.name,
          type: 'bar',
          data: item.data
        }))
      }
    },
    getTypeOption() {
      const { title, data } = this.mockData.type
      return {
        title: {
          text: title,
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}: {c}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            data: data
          }
        ]
      }
    },
    getExpiryOption() {
      const { title, xData, data } = this.mockData.expiry
      return {
        title: {
          text: title,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data,
            type: 'line',
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.box-card {
  margin: 0 auto;
  max-width: 1200px;
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}
</style>
